<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            width: 65%;
            height: 550px;
            border: 1px solid red;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .box .left {
            width: 65%;
            height: 100%;
            /* background-color: pink; */
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            /* border: 1px solid gray; */

        }

        .box .right {
            width: 32%;
            height: 100%;
            border: 1px solid gray;

        }

        .box .left figure {
            width: 23%;
            height: 275px;
            border: 1px solid gray;

        }

        .box .left figure .tupian {
            width: 100%;
            height: 70%;
            background-color: rgb(206, 205, 205);
        }

        .box .left figure .bottom {
            padding: 10px;
        }

        .box .right h2 {
            height: 10%;
        }

        .box .right .cart {
            height: 100%;
            width: 100%;
            overflow: auto;
        }

        .box .right .shangpin {
            display: flex;
            border: 1px solid red;
            justify-content: space-evenly;
        }

        .box .right .shangpin .xinxi {
            /* width: 20%; */
            line-height: 50px;

            height: 50px;
            text-align: center;
            /* line-height: 100px; */

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">


        </div>
        <div class="right">
            <div class="cart"></div>

        </div>
    </div>
</body>

</html>
<script>
    class shoopingCart {
        constructor(arr) {
            this.arr = arr
            this.left = document.querySelector('.left')
            // 商品
            this.str = []
            // 购物车
            this.str2 = []
            // 购物车数据
            this.str3 = []
            this.count = 0
            this.Cart = document.querySelector('.cart')
            this.commodity()
            this.click()
        }
        // 将商品渲染到页面
        commodity() {
            this.str = this.arr.map((item) => {
                return `<figure>
                            <div class="tupian"></div>
                            <figcaption>
                                <div class="bottom">
                                    <p>${item.id}</p>
                                    <p>${item.price}</p>
                                    <button>${item.btn}</button>
                                </div>
                            </figcaption>
                        </figure>`
            }).join('')
            this.left.innerHTML = this.str
        }
        // 渲染购物车
        shoopCart() {
            this.str3 = this.str2.map((item) => {
                return `<div class="shangpin">
                            <div class="xinxi xuanze"><input type="checkbox"> </div>
                            <div class="xinxi tu">${item.id}</div>
                            <div class="xinxi danjia">${item.price}</div>
                            <div class="xinxi shuliang">1</div>
                            <div class="xinxi caozuo">删除</div>
                        </div>`
            }).join('')
            this.Cart.innerHTML = `<h2>购物车(${this.count})</h2> ${this.str3}`
        }
        // 点击事件
        click() {
            this.left.onclick = (e) => {
                if (e.target.tagName == 'BUTTON') {
                    // if (index) {

                    // }
                    this.count++
                    // 获取点击的商品的下标
                    this.btns = [...document.querySelectorAll('button')]
                    this.index = this.btns.findIndex((item) => {
                        return item == e.target;
                    })
                    console.log(this.index);
                    // 添加商品数据到 购物车数组
                    this.str2.push(this.arr[this.index])
                    this.shoopCart()

                }
                console.log(this.str2);
            }


        }


    }


    var arr = [
        { id: '高级办公椅', price: '10000', btn: '加入购物车' },
        { id: '高级按摩椅', price: '1000', btn: '加入购物车' },
        { id: '高级电动按摩椅', price: '100', btn: '加入购物车' },
        { id: '电动按摩椅', price: '10', btn: '加入购物车' },
        { id: '老板椅', price: '20000', btn: '加入购物车' },
        { id: '办公桌', price: '50000', btn: '加入购物车' },
        { id: '可升降办公椅', price: '2000', btn: '加入购物车' },
        { id: '可升降办公桌', price: '5000', btn: '加入购物车' }
    ]
    var s = new shoopingCart(arr)
</script>